<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 警告区域 -->
			<el-alert :closable="false" title="注意：只允许为三级分类设置相关参数！" type="warning" show-icon></el-alert>
			<!-- 选择商品分类区域 -->
			<el-row class="cat_opt">
				<el-col>
					<span>选择商品分类：</span>
						<!-- 选择商品分类的级联选择框 -->
					<el-cascader style="width: 300px;" expand-trigger="hover" :options="cateList" :props="cateProps" 
					v-model="selectedCateKeys" @change="handleChange"></el-cascader>
				</el-col>
			</el-row>
			<!-- tab 页签区 -->
			<el-tabs v-model="activeName" @tab-click="handleTabClick">
				<!-- 添加动态参数的面板 -->
				<el-tab-pane label="动态参数" name="many">
					<el-button type="primary" size="mini" :disabled="isBtnDisable" @click="addDialogVisible = true">添加参数</el-button>
					<!-- 动态参数表格 -->
					<el-table :data="manyTableData" border stripe>
						<!-- 展开行 -->
						<el-table-column type="expand">
							<!-- 作用域插槽 用scope接收 -->
							<template slot-scope="scope">
								<!-- 循环渲染tag标签 -->
								<el-tag v-for="(item,index) in scope.row.attr_vals" :key="index" closable @close="handleClose(index, scope.row)">{{item}}</el-tag>
								<!-- 输入的文本框 -->
								<el-input style="width: 120px;"
								  v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
								  ref="saveTagInput" size="small"
								  @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"></el-input>
								<!-- 添加的按钮 -->
								<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
							</template>
						</el-table-column>
						<!-- 索引列 -->
						<el-table-column type="index" label="#"></el-table-column>
						<el-table-column label="参数名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
								<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<!-- 添加静态属性的面板 -->
				<el-tab-pane label="静态属性" name="only">
					<el-button type="primary" size="mini" :disabled="isBtnDisable" @click="addDialogVisible = true">添加属性</el-button>
					<!-- 静态属性表格 -->
					<el-table :data="onlyTableData" border stripe>
						<!-- 展开行 -->
						<el-table-column type="expand">
							<!-- 作用域插槽 用scope接收 -->
							<template slot-scope="scope">
								<!-- 循环渲染tag标签 -->
								<el-tag v-for="(item,index) in scope.row.attr_vals" :key="index" closable @close="handleClose(index, scope.row)">{{item}}</el-tag>
								<!-- 输入的文本框 -->
								<el-input style="width: 120px;"
								  v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
								  ref="saveTagInput" size="small"
								  @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"></el-input>
								<!-- 添加的按钮 -->
								<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
							</template>
						</el-table-column>
						<!-- 索引列 -->
						<el-table-column type="index" label="#"></el-table-column>
						<el-table-column label="属性名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
								<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>	
		</el-card>
		
		<!-- 添加参数的对话框 -->
		<el-dialog :title="'添加' + titleText" :visible.sync="addDialogVisible"
		  width="50%" @close="addDialogClosed">
		  <!-- 添加参数的对话框 -->
		  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
		    <el-form-item :label="titleText" prop="attr_name">
		      <el-input v-model="addForm.attr_name"></el-input>
		    </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addParams">确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 修改参数的对话框 -->
		<el-dialog :title="'修改' + titleText" :visible.sync="editDialogVisible"
		  width="50%" @close="editDialogClosed">
		  <!-- 修改参数的对话框 -->
		  <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
		    <el-form-item :label="titleText" prop="attr_name">
		      <el-input v-model="editForm.attr_name"></el-input>
		    </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editParams">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 商品分类列表
				cateList: [],
				// 级联选择框的配置对象
				cateProps:{
					value: 'cat_id',
					label: 'cat_name',
					children: 'children'
				},
				// 级联选择框双向绑定到的数组
				selectedCateKeys:[],
				// Tab页签 被激活的名称 默认展示动态参数
				activeName:'many',
				// 动态参数的数据存储
				manyTableData:[],
				// 静态的数据存储
				onlyTableData:[],
				// 控制添加对话框的显示与隐藏
				addDialogVisible:false,
				// 添加对话框的表单数据对象
				addForm:{
					attr_name: ''
				},
				// 添加表单的验证规则对象
				addFormRules:{
					attr_name:[
						{ required: true, message: '请输入参数名称', trigger: 'blur' }
					]
				},
				
				// 控制修改对话框的显示与隐藏
				editDialogVisible:false,
				// 修改表单的数据对象
				editForm:[],
				// 修改表单的验证规则对象
				editFormRules:{
					attr_name:[
						{ required: true, message: '请输入参数名称', trigger: 'blur' }
					]
				}
			}
		},
		created() {
			this.getCateList()
		},
		methods:{
			// 获取所有商品分类
			async getCateList(){
				const {data : res} = await this.$http.get('categories')
				if(res.meta.status !== 200){
					return this.$message.error('获取商品分类失败')
				}
				// 把数据列表 赋值给cateList
				this.cateList = res.data
				// console.log(this.cateList)
			},
			// 级联选择框选中项变化会触发这个函数
			handleChange(){
				this.getParamsData()
			},
			// Tab页签 点击事件的处理函数
			handleTabClick(){
				// console.log(this.activeName)
				this.getParamsData()
			},
			// 获取参数列表数据
			async getParamsData(){
				// 证明选中的不是三级分类
				if (this.selectedCateKeys.length !== 3) {
					this.selectedCateKeys = []
					this.manyTableData = []
					this.onlyTableData = []
					return
				}
				// 证明选中的是三级分类
				// console.log(this.selectedCateKeys)
				// 根据所选分类的id,和当前所处的面板,获取对应的参数
				const {data : res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params: {sel: this.activeName}})
				if(res.meta.status !== 200) {
					return this.$message.error('获取参数列表失败')
				}
				
				// 循环遍历attr_vals 用,分开 形成一个数组
				res.data.forEach(item => {
					item.attr_vals =  item.attr_vals ? item.attr_vals.split(',') : [],
					// 控制文本框的显示与隐藏
					item.inputVisible = false
					// 文本框中输入的值
					item.inputValue = ''
				})
				// console.log(res.data)
				this.activeName === 'many' ? this.manyTableData = res.data : this.onlyTableData = res.data
				// if(this.activeName === 'many'){
				// 	this.manyTableData = res.data
				// }else{
				// 	this.onlyTableData = res.data
				// }
			},
			// 监听添加对话框的关闭事件，重置表单数据
			addDialogClosed(){
				// 重置分类名称
				this.$refs.addFormRef.resetFields()
			},
			// 点击确定按钮，添加参数
			addParams(){
				this.$refs.addFormRef.validate(async valid => {
					//验证失败 直接return
					if(!valid) return
					const {data: res} = await this.$http.post(`categories/${this.cateId}/attributes`,{
						attr_name: this.addForm.attr_name,
						attr_sel: this.activeName
					})
					 if (res.meta.status !== 201) {
						 return this.activeName === 'many' ? this.$message.error('添加参数失败！') :this.$message.error('添加属性失败！')
					          // return this.$message.error('添加参数失败！')
					        }
					this.activeName === 'many' ? this.$message.success('添加参数成功！') :this.$message.success('添加属性成功！')
					this.getParamsData()
					this.addDialogVisible = false		
				})
			},
			// 点击按钮，展示修改的对话框
			async showEditDialog(attr_id){
				// 查询当前参数的信息
				const {data : res} = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`,{
					params: { attr_sel:this.activeName}
				})
				if(res.meta.status !== 200) {
					return this.$message.error('获取参数信息失败')
				}
				this.editForm = res.data
				this.editDialogVisible = true
			},
			// 重置修改表单的数据
			editDialogClosed(){
				this.$refs.editFormRef.resetFields()
			},
			// 点击确定按钮，修改参数信息
			editParams(){
				this.$refs.editFormRef.validate(async valid => {
					//验证失败 直接return
					if(!valid) return
					const {data: res} = await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`,{
						attr_name: this.editForm.attr_name,
						attr_sel: this.activeName
					})
					 if (res.meta.status !== 200) {
						return this.activeName === 'many' ? this.$message.error('修改参数失败！') : this.$message.error('修改属性失败！')
							} 
					this.activeName === 'many' ? this.$message.success('修改参数成功！') : this.$message.success('修改属性成功！')
					this.getParamsData()
					this.editDialogVisible = false       
				})
			},
			
			// 删除对应id参数信息
			async removeParams(attr_id){
				// 弹框， 询问是否删除
				const res = await this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
				         confirmButtonText: '确定',
				         cancelButtonText: '取消',
				         type: 'warning'
				    }).catch(err => {return err})
				// console.log(res)
				// 如果确认删除,返回字符串 confirm
				// 如果取消删除,返回字符串 cancel
				if(res !== 'confirm'){
					return this.$message.info('已取消删除')
				}
				// {data:res} 重构属性
				const {data:resa} = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)
				if(resa.meta.status !== 200){
					return 	this.activeName === 'many' ? this.$message.error('删除参数失败！') : this.$message.error('删除属性失败！')
				} 
				// console.log(resa)
				this.activeName === 'many' ? this.$message.success('删除参数成功！') : this.$message.success('删除属性成功！')
				// 这个会覆盖页面
				this.getParamsData()
			},
			// 文本框失去焦点或按下enter键触发
			async handleInputConfirm(row){
				// 判断输入的内容是否为空
				if(row.inputValue.trim().length === 0){
					row.inputValue = ''
					row.inputVisible = false
					return
				}
				// 如果没有return,则输入了内容
				row.attr_vals.push(row.inputValue.trim())
				row.inputValue = ''
				row.inputVisible = false
				// 发起请求，把输入内容提交到后台
				this.saveAttrVals(row)
			},
			// 将 attr_vals 的操作保存到数据库
			async saveAttrVals(row){
				const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{
					attr_name: row.attr_name,
					attr_sel: row.attr_sel,
					attr_vals: row.attr_vals.join(',')
				})
				if(res.meta.status !== 200){
					return 	this.activeName === 'many' ? this.$message.error('修改参数项失败！') : this.$message.error('修改属性项失败！')
				} 
				
				this.activeName === 'many' ? this.$message.success('修改参数项成功！') : this.$message.success('修改属性项成功！')
				// 这个会覆盖页面
				// this.getParamsData()
				// row.children = res.data
			},
			// 点击按钮,展示文本输入框
			showInput(row){
				row.inputVisible = true
				// 让文本框自动获得焦点
				/* $nextTick 方法的作用，就是当页面上元素
				被重新渲染之后，才会指定回调函数中的代码*/
				this.$nextTick(_ => {
				         this.$refs.saveTagInput.$refs.input.focus();
				})
			},
			// 删除对应的可选项
			handleClose(i,row){
				row.attr_vals.splice(i,1)
				this.saveAttrVals(row)
				
			}
		},
		// 计算属性的 节点
		computed:{
			// 如果按钮需要被禁用,则返回true 否则返回false
			isBtnDisable(){
				// if(this.selectedCateKeys.length !== 3){
				// 	return true
				// }
				// return false
				return this.selectedCateKeys.length !==3
			},
			// 当前选中的三级分类ID
			cateId(){
				if(this.selectedCateKeys.length == 3){
					return this.selectedCateKeys[2]
				}
				return null
			},
			// 动态计算标题的文本
			titleText(){
				return this.activeName === 'many'?'动态参数':'静态属性'
			}
		}
	}
</script>

<style>
	.cat_opt {
		margin: 15px 0;
	}
	.el-tag {
		margin: 10px;
	}
</style>
